<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}后台管理{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='img/logo-mini.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap5/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap5/icons/font/bootstrap-icons.css') }}">

    <style>
        :root {
            --sidebar-width: 180px;
            --sidebar-collapsed-width: 80px;
            --primary-color: #3498db;
            --sidebar-bg: #2c3e50;
            --sidebar-active-bg: #34495e;
            --text-color: #ecf0f1;
        }

        html, body {
            height: 100%;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            display: flex;
        }

        .sidebar {
            width: var(--sidebar-width);
            background: var(--sidebar-bg);
            height: 100vh;
            position: fixed;
            left: 0;
            z-index: 1000;
            transition: width 0.3s ease-in-out;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }

        .main-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            transition: margin-left 0.3s ease-in-out;
            background-color: #f8f9fa;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        .main-content.collapsed {
            margin-left: var(--sidebar-collapsed-width);
        }

        .logo-container {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            overflow: hidden;
            position: relative;
        }

        .logo-full, .logo-mini {
            position: absolute;
            transition: all 0.3s ease-in-out;
        }

        .logo-full {
            height: 40px;
            opacity: 1;
        }

        .logo-mini {
            width: 30px;
            opacity: 0;
        }

        .sidebar.collapsed .logo-full {
            opacity: 0;
            transform: translateX(-10px);
        }

        .sidebar.collapsed .logo-mini {
            opacity: 1;
        }

        .nav-item {
            margin: 4px 0;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .nav-link {
            color: var(--text-color) !important;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            height: 100%;
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.3s;
        }

        .nav-link i {
            min-width: 24px;
            font-size: 1.1rem;
        }

        .nav-link:hover {
            background: var(--sidebar-active-bg) !important;
            transform: translateX(6px);
        }

        .nav-link.active {
            background: linear-gradient(90deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1)) !important;
            border-left: 4px solid var(--primary-color);
            transform: translateX(6px);
        }

        .nav-link.active i {
            color: var(--primary-color) !important;
        }

        .sidebar.collapsed .nav-link {
            padding: 0;
            justify-content: center;
        }

        .sidebar.collapsed .nav-link span {
            display: none;
        }

        .sidebar.collapsed .nav-link i {
            font-size: 1.3rem;
        }

        .sidebar.collapsed .nav-link.active {
            border-left-color: transparent;
            transform: none;
            background: rgba(52, 152, 219, 0.15) !important;
        }

        .top-navbar {
            background: white !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }

        .content-container {
            padding: 2rem;
            flex: 1;
        }

        .footer {
            background-color: #171616;
            color: #deffff;
            padding: 1rem 0;
            font-size: 0.875rem;

        }

        @media (max-width: 992px) {
            .sidebar {
                transform: translateX(-100%);
                width: 280px;
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0 !important;
            }

            .sidebar.collapsed {
                width: 280px;
                transform: translateX(-100%);
            }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>

<div class="sidebar d-flex flex-column p-3">
    <div class="logo-container">
        <img src="{{ url_for('static', filename='img/logo.svg') }}" class="logo-full" alt="Logo">
        <img src="{{ url_for('static', filename='img/logo-mini.svg') }}" class="logo-mini" alt="Mini Logo">
    </div>
    <nav class="nav flex-column">
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.dashboard') }}"><i class="bi bi-speedometer2 me-2"></i><span>仪表盘</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.users') }}"><i class="bi bi-people me-2"></i><span>用户管理</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.websites') }}"><i class="bi bi-globe me-2"></i><span>网站管理</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.categories') }}"><i class="bi bi-tags me-2"></i><span>分类管理</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.suggestions') }}"><i class="bi bi-chat-dots me-2"></i><span>建议管理</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.images') }}"><i class="bi bi-image me-2"></i><span>图片管理</span></a></div>
        <div class="nav-item"><a class="nav-link" href="{{ url_for('admin.view_logs') }}"><i class="bi bi-link me-2"></i><span>访问日志</span></a></div>
    </nav>
</div>

<div class="main-content d-flex flex-column">
    <nav class="navbar navbar-expand-lg navbar-light top-navbar">
        <div class="container-fluid">
            <button class="btn btn-outline-secondary" onclick="toggleSidebar()"><i class="bi bi-list"></i></button>
            <div class="d-flex align-items-center ms-auto">
                <span class="me-3 text-muted">管理员：admin</span>
                <a href="{{ url_for('admin.logout') }}" class="btn btn-outline-danger btn-sm"><i class="bi bi-box-arrow-right"></i> 退出</a>
            </div>
        </div>
    </nav>

    <div class="content-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>

    <footer class="footer text-center">
        <div class="container">
            <div>
                &copy; 2023-{{ current_year }}
                <a href="https://linmwo.top" class="text-white text-decoration-none" target="_blank">林墨导航</a>
                All Rights Reserved.
            </div>
            <div class="mt-1">
                Powered by
                <a href="https://flask.palletsprojects.com/" class="text-white text-decoration-none" target="_blank">Flask</a>
                |
                <a href="https://v5.bootcss.com/" class="text-white text-decoration-none" target="_blank">
                    <i class="bi bi-bootstrap"></i> Bootstrap5
                </a>
            </div>
            <div class="mt-1">
                <a href="https://beian.miit.gov.cn/" class="text-white text-decoration-none" target="_blank">{{ beian }}</a>
            </div>
        </div>
    </footer>
</div>

<script src="{{ url_for('static', filename='bootstrap5/js/bootstrap.bundle.min.js') }}"></script>
<script>
    function setActiveNavItem() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            const linkPath = new URL(link.href).pathname;
            if (linkPath === currentPath) {
                link.classList.add('active');
                if (window.matchMedia('(max-width: 992px)').matches) {
                    document.querySelector('.sidebar').classList.add('active');
                }
            } else {
                link.classList.remove('active');
            }
        });
    }

    function toggleSidebar() {
        const sidebar = document.querySelector('.sidebar');
        const mainContent = document.querySelector('.main-content');
        const isMobile = window.matchMedia('(max-width: 992px)').matches;
        if (isMobile) {
            sidebar.classList.toggle('active');
        } else {
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('collapsed');
            localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
        }
    }

    function setupMobileMenuBehavior() {
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                if (window.matchMedia('(max-width: 992px)').matches) {
                    document.querySelector('.sidebar').classList.remove('active');
                }
            });
        });
    }

    function initSidebarState() {
        const sidebar = document.querySelector('.sidebar');
        const mainContent = document.querySelector('.main-content');
        if (window.matchMedia('(min-width: 993px)').matches) {
            const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            sidebar.classList.toggle('collapsed', isCollapsed);
            mainContent.classList.toggle('collapsed', isCollapsed);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        setActiveNavItem();
        initSidebarState();
        setupMobileMenuBehavior();
    });
</script>
{% block extra_js %}{% endblock %}
</body>
</html>